<script setup>
import { ref, reactive } from 'vue'
import { postOrDeleteCommentApi } from '@/apis/comment.js'
import { ElMessage } from 'element-plus'
import bus from '@/utils/bus'

const props = defineProps(['id', 'type', 'name'])


const commentDialog = ref(false)
const comment = reactive({ content: '' })
// 校验规则（歌单名称）
const rules = reactive({
  content: [
    { required: true, message: '请输入评论内容', trigger: 'blur' },
    { min: 1, max: 30, message: '请输入 1 - 5 长度字符', trigger: 'blur' },
  ]
})

// 发表评论
const ruleFormRef = ref(null)
const postComment = () => {
  // 进行校验
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      const { data } = await postOrDeleteCommentApi({
        t: 1,
        type: props.type,
        id: props.id,
        content: comment.content
      })
      if (data.code === 200) {
        ElMessage({
          type: 'success',
          message: '评论成功'
        })
        // bus对象：向 FullComment 组件发送，作用：更新数据
        bus.emit('updateComment')
        commentDialog.value = false
      } else {
        ElMessage('评论失败')
      }
    }
  })
}
</script>

<template>
  <div class="full-post-comment">
    <p class="iconfont icon-liaotian" @click="commentDialog = true"></p>
    <el-dialog v-model="commentDialog" :modal="false" :width="600">
      <p>歌曲：{{ props.name }}</p>
      <el-form :rules="rules" :model="comment" ref="ruleFormRef" status-icon>
        <el-form-item prop="content">
          <el-input v-model="comment.content" row="2" type="textarea" placeholder="快来说点什么吧" />
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="postComment">
        发送
      </el-button>
    </el-dialog>
  </div>
</template>

<style scoped lang='scss'>
.full-post-comment {
  .icon-liaotian {
    font-size: 24px;
  }
}
</style>
